'use strict';
import React from 'react';
import {Button,Modal,Input,Pagination,Row,Col} from 'react-bootstrap';
import Simditor from 'simditorjs';
import ReactDOM from 'react-dom';

import 'fontAwesome';
import 'simditorcss';

const AddModal = React.createClass({

	getInitialState:function(){
		return {
			type:'01'
		};
	},
	getAnswers:function(type){
		switch(type){
			case '01':
				var res = [],tmp;
				for(let i = 0; i < 4 ; i ++){
					tmp = <input type="radio" name="test"/>;
					res.push(
						<Input type="text" key={i} addonAfter={tmp}/>
						)
				}
				return <Row>
							<Col xs={2}>
								<span>设置答案</span>
							</Col>
							<Col xs={10}>
								{res}
							</Col>
						</Row>;
			case '02':
				return <Row>
							<Col xs={2}>
								<span>设置答案</span>
							</Col>
							<Col xs={8}>
								<Row>
									<Input type="text" />
									<Input type="text" />
									<Input type="text" />
									<Input type="text" />
								</Row>
							</Col>
							<Col xs={2}>

							</Col>
						</Row>;
			case '03':
				break;
			case '04':
				break;
			default:
				return <Row></Row>;
				break;
		}
	},
	test:function(){
		console.log('why ..........start.......')
	},
	componentDidMount:function(){

	},
	change:function(e){
		console.log(e.target.value);
		this.setState({type:e.target.value});
	},
	render:function(){
		var types = _.map(this.props.types,function(cur,index){
			return <option key={'op_'+index} value={cur.typeId}>
						{cur.typeName}
					</option>
		});
		return (
			<Modal show={this.props.showModal} onHide={this.props.close}>
			<Modal.Header>
				<Modal.Title>新增题型</Modal.Title>
			</Modal.Header>
			<Modal.Body>
				<form className="form-horizontal">
					<Row>
						<Col xs={6}>
							<Input type="select" label="试题类型" labelClassName="col-xs-4" wrapperClassName="col-xs-8" onChange={this.change}>
								{types} 
							</Input>
						</Col>
						<Col xs={6}>
							<Input type="select" label="所属类别" labelClassName="col-xs-4" wrapperClassName="col-xs-8" onChange={this.change}>
								{types} 
							</Input>
						</Col>
					</Row>
					<Row>
						<Input type="textarea" label="题干" labelClassName="col-xs-2" wrapperClassName="col-xs-10"/>
					</Row>
					{this.getAnswers(this.state.type)}
				</form>
			</Modal.Body>
			<Modal.Footer>
			</Modal.Footer>
		</Modal>);
	}
});


export default class QuestionList extends React.Component{
	componentDidMount(){
		this.loadData({page:1});
		this.loadPro();
		console.log(this.refs.test_editor);
		console.log('============================');
		var test_editor = ReactDOM.findDOMNode(this.refs.test_editor);
		//var editor = new Simditor({   textarea: $(test_editor) });

	}

	loadData(ds){
		var self = this;
		$.ajax({
            url:'/api/queryPageQuestions',
            type:'get',
            dataType:'json',
            data:ds,
            success:function(data){
                console.log(data);
                self.setState({items:data.count,list:data.list,activePage : ds.page});
            }
        });
	}
	loadPro(){
		var self = this;
		$.ajax({
            url:'/api/queryExamType',
            type:'get',
            dataType:'json',
            success:function(data){
                console.log(data);
                self.setState({types:data});
            }
        });
	}

	close(){
		this.setState({showModal:false,cur:{},index:-1});
	}

	open(){
		this.refs.tests.test();
		this.setState({showModal:true});
	}

	update(ind){
		this.state.cur = this.state.list[ind];
		this.state.index = ind;
		this.setState({showModal:true});
	}

	confirm(){
		
	}
	
	constructor(props){
		super(props);
		this.state = {items:0,activePage:1,list:[],types:[],showModal:false};
	}
	handleSelect(e,ek){
		// this.setState({activePage : ek.eventKey});
		this.loadData({page:ek.eventKey});
	}
	change(e){
		console.log(e.target.value);
	}

	render(){
		var contents = _.map(this.state.list,function(cur,index){
			return <tr key={index}>
						<td>{cur.type}</td>
						<td>{cur.title}</td>
						<td><a>测试1</a></td>
					</tr>;
		});
		var types = _.map(this.state.types,function(cur,index){
			return <option key={'op_'+index} value={cur.typeId}>
						{cur.typeName}
					</option>
		});
		return (
			<div>
				<div>
					<form className="form-horizontal">
						<Row>
						<Col xs={6}>
						<Input type="select" label="试题类型" labelClassName="col-xs-2" wrapperClassName="col-xs-4">
							{types} 
						</Input>
						</Col>
						<Col xs={6}>
						<Input type="select" label="试题类型" labelClassName="col-xs-2" wrapperClassName="col-xs-4">
							{types} 
						</Input>
						</Col>
						</Row>
					</form>
					<Button bsStyle="primary" onClick={this.open.bind(this)}>新增试题</Button>
					<AddModal ref="tests" showModal={this.state.showModal} close={this.close.bind(this)} types={this.state.types}/>
				</div>
				<table className="table table-hover">
					<thead>
						<tr>
							<th>试题类型</th>
							<th>试题内容</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{contents}
					</tbody>
				</table>
				<Pagination
		        prev={this.state.items > 0}
		        next={this.state.items > 0}
		        first={this.state.items > 0}
		        last={this.state.items > 0}
		        ellipsis={true}
		        boundaryLinks={true}
		        items={this.state.items}
		        maxButtons={5}
		        activePage={this.state.activePage}
		        onSelect={this.handleSelect.bind(this)} />
			</div>
		);
	}
}